<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Menu 菜单3</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">Collapse 折叠面板</el-divider><!-- =============================================================== -->
	<p class="desc">垂直导航菜单可以被折叠</p>
	<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
		<el-radio-button :label="false">expand</el-radio-button>
		<el-radio-button :label="true">collapse</el-radio-button>
	</el-radio-group>
	<br>
	<!-- <br><el-button @click="open_close">开 | 关</el-button> -->
	<el-button :style="styleObj" @click="open_close"><span :style="color_header_left" v-html="buttonText"></span></el-button>
	<el-menu :default-openeds="defaultOpeneds" :default-active="activeIndex":collapse="isCollapse" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleSelect">
		<el-sub-menu index="1">
			<template #title>
				<el-icon><location></location></el-icon> <span>Navigator One</span>
			</template>
			<el-menu-item-group title="Group One">
				<el-menu-item index="/chain/seek/a">item one</el-menu-item>
				<el-menu-item index="/chain/seek/b">item two</el-menu-item>
			</el-menu-item-group>
			<el-menu-item-group title="Group Two">
				<el-menu-item index="/chain/seek/c">item three</el-menu-item>
			</el-menu-item-group>
			<el-sub-menu index="1-4">
				<template #title>item four</template>
				<el-menu-item index="/chain/seek/d">item one</el-menu-item>
			</el-sub-menu>
		</el-sub-menu>
		<el-menu-item index="2">
			<el-icon><Tickets></Tickets></el-icon> <span>Navigator Two</span>
		</el-menu-item>
		<el-menu-item index="3" disabled>
			<el-icon><document></document></el-icon> <span>Navigator Three</span>
		</el-menu-item>
		<el-menu-item index="4">
			<el-icon><setting></setting></el-icon> <span>Navigator Four</span>
		</el-menu-item>
	</el-menu>
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			defaultOpeneds: ['1'],
			activeIndex: '1-2',
			isCollapse: false,
			styleObj: {width: '200px'},
			buttonText: "收起",
		}
	},
	methods:{
		handleSelect(key, keyPath){
			// console.log(key, keyPath);
			console.log("toPage: " + key);
		},
		handleOpen(key, keyPath){
			console.log(key, keyPath);
		},
		handleClose(key, keyPath){
			console.log(key, keyPath);
		},
		open_close(){
			// this.isCollapse = !this.isCollapse;
			if(this.isCollapse){
				//收起的，需要展开
				this.isCollapse = false;
				this.styleObj = {width: '200px'};
				this.buttonText = "收起";
				// console.log("展开了。。。")
			}else{
				//展开的，需要收起
				this.isCollapse = true;
				this.styleObj = {width: '64px'};
				this.buttonText = "展开";
			}
			// console.log(this.isCollapse);
		},
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>